//top区域
let topBtn = document.querySelectorAll('.top .middle a')
topBtn.forEach(function (v, i) {
    v.onclick = function () {
        topBtn.forEach(function (v2, i2) {
            v2.className = ''
        })

        v.className = 'topOn'
    }
})


// 价格模拟服务器的数据

let data = [
    { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
    { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
    { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
]
let bannerBtn = document.querySelector('.banner-btn')
data.forEach(function (v, i) {
    bannerBtn.innerHTML += ` <a class="times">${v.count}次</a>`
})

//渲染之后获取按钮
let btnArr = document.querySelectorAll('.banner-btn .times');
console.log(btnArr);
// 初始化样式
btnArr[0].classList.add('count');
//获取按钮
let buy = document.querySelector('.buy');

btnArr.forEach(function (v, i) {
    v.onclick = function () {
        //一刀切
        btnArr.forEach(function (v2, i2) {
            v2.classList.remove('count')
        })
        // 当前按钮添加count样式
        v.classList.add('count');

        buy.innerHTML = `<span class="price">￥${data[i].price}</span>
        <span class="about">(约${data[i].unitPrice}/次)，仅限企业实名购买</span>
        <p><button>立即申请</button></p>`
    }
})


// 循环左侧大盒子，一对一

let btnBox = document.querySelectorAll('.nav span');
let boxs = document.querySelectorAll('.main-left .box');

btnBox.forEach(function (v, i) {

    v.onclick = function () {
        //一刀切
        btnBox.forEach(function (v2, i2) {
            v2.classList.remove('bor')
        })
        //加样式
        v.classList.add('bor')
        //去掉大盒子下的小盒子block
        boxs.forEach(function (v3, i3) {
            v3.style.display = 'block'
        })

        if (i == 1) {
            boxs[0].style.display = 'none';
            boxs[4].style.display = 'none';
    
        } else if (i == 2) {
            boxs[0].style.display = 'none';
            boxs[1].style.display = 'none';
            boxs[2].style.display = 'none';
            boxs[4].style.display = 'none';
        } else if (i == 3) {
            boxs[0].style.display = 'none';
            boxs[1].style.display = 'none';
            boxs[2].style.display = 'none';
            boxs[3].style.display = 'none';
            boxs[4].style.display = 'block';
        }
    }
})